<template>
  <div
    class="conversation-item-container"
    :class="{ 'choose': conversation.conversationID === currentConversation.conversationID }"
    @click="selectConversation"
  >
    <div class="warp">
      <avatar
        :src="avatar"
        :type="conversation.type"
      />
      <div class="content">
        <div class="row-1">
          <div class="name">
            <div class="text-ellipsis">
              <span
                :title="conversation.userProfile.nick || conversation.userProfile.userID"
                v-if="conversation.type === $types.CONV_C2C"
              >
                {{ conversation.userProfile.nick || conversation.userProfile.userID }}
              </span>
              <span
                :title="conversation.groupProfile.name || conversation.groupProfile.groupID"
                v-else-if="conversation.type === $types.CONV_GROUP"
              >
                {{ conversation.groupProfile.name || conversation.groupProfile.groupID }}
              </span>
              <span v-else-if="conversation.type === $types.CONV_SYSTEM">系统通知</span>
            </div>
          </div>
          <div class="unread-count">
            <span
              class="badge"
              v-if="showUnreadCount"
            >
              {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
            </span>
          </div>
        </div>
        <div class="row-2">
          <div class="summary">
            <div
              v-if="conversation.lastMessage"
              class="text-ellipsis"
            >
              <span
                class="remind"
                style="color:red;"
                v-if="hasMessageAtMe"
              >[有人提到我]</span>
              <span
                class="text"
                :title="conversation.lastMessage.messageForShow"
              >
                {{ messageForShow }}
              </span>
            </div>
          </div>
          <div class="date">
            {{ date }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { isToday, getDate, getTime } from '@/util/date'

export default {
  name: 'ConversationItem',
  props: {
    // 会话
    conversation: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      popoverVisible: false,
      hasMessageAtMe: false,
      handleNewMessageAtMeFunc: null
    }
  },
  created() {
    this.handleNewMessageAtMeFunc = this.handleNewMessageAtMe.bind(this)
    this.$bus.$on('new-message-at-me', this.handleNewMessageAtMeFunc)
  },
  beforeDestroy() {
    this.$bus.$off('new-message-at-me', this.handleNewMessageAtMeFunc)
  },
  computed: {
    ...mapState(['currentConversation', 'currentUserProfile']),
    ...mapGetters(['hidden', 'toAccount']),
    showUnreadCount() {
      if (this.hidden) {
        return this.conversation.unreadCount > 0
      }
      // 是否显示未读计数。当前会话和未读计数为0的会话，不显示。
      return (
        this.currentConversation.conversationID !==
          this.conversation.conversationID && this.conversation.unreadCount > 0
      )
    },
    date() {
      if (
        !this.conversation.lastMessage ||
        !this.conversation.lastMessage.lastTime
      ) {
        return ''
      }
      const date = new Date(this.conversation.lastMessage.lastTime * 1000)
      if (isToday(date)) {
        return getTime(date)
      }
      return getDate(date)
    },
    avatar: function() {
      switch (this.conversation.type) {
        case this.$types.CONV_GROUP:
          return this.conversation.groupProfile.avatar
        case this.$types.CONV_C2C:
          return this.conversation.userProfile.avatar
        default:
          return ''
      }
    },
    messageForShow() {
      if (this.conversation.lastMessage.isRevoked) {
        if (this.conversation.lastMessage.fromAccount === this.currentUserProfile.userID) {
          return '你撤回了一条消息'
        }
        if (this.conversation.type === this.$types.CONV_C2C) {
          return '对方撤回了一条消息'
        }
        return `${this.conversation.lastMessage.fromAccount}撤回了一条消息`
      }
      return this.conversation.lastMessage.messageForShow
    },
  },
  watch: {
    currentConversation(next) {
      if (next.conversationID === this.conversation.conversationID) {
        this.hasMessageAtMe = false
      }
    }
  },
  methods: {
    handleNewMessageAtMe(event) {
      if (
        event.data.conversationID === this.conversation.conversationID &&
        this.conversation.conversationID !== this.currentConversation.conversationID
      ) {
        this.hasMessageAtMe = true
      }
    },
    selectConversation() {
      if (this.conversation.conversationID !== this.currentConversation.conversationID) {
        this.$store.dispatch(
          'checkoutConversation',
          this.conversation.conversationID
        )
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.conversation-item-container
  padding 15px 20px
  cursor pointer
  position relative
  overflow hidden
  transition .2s
  &:hover
    background-color $background
  .warp
    display flex
  .avatar
    width 40px
    height 40px
    margin-right 10px
    border-radius 50%
    flex-shrink 0
  .content
    flex 1
    height 40px
    overflow hidden
    .row-1
      display flex
      line-height 21px
      .name
        color $font-light
        flex 1
        min-width 0px
      .unread-count
        padding-left 10px
        flex-shrink 0
        color $font-dark
        font-size 12px
        .badge
          vertical-align bottom
          background-color $danger
          border-radius 10px
          color #FFF
          display inline-block
          font-size 12px
          height 18px
          max-width 40px
          line-height 18px
          padding 0 6px
          text-align center
          white-space nowrap
    .row-2
      display flex
      font-size 12px
      padding-top 3px
      .summary
        flex 1
        overflow hidden
        min-width 0
        color: $secondary
        .remind
          color $danger
      .date
        padding-left 10px
        flex-shrink 0
        text-align right
        color $font-dark
.choose {
  background-color: $background;
}
</style>
